import * as echarts from "echarts";


interface ChartDataItem {
    key: string;
    data: number;
    label: string;
}

// 模拟从后端获取的数据
export const chartData: ChartDataItem[] = [
    {key: "1", data: 10, label: "数据1"},
    {key: "2", data: 5, label: "数据2"},
    {key: "3", data: 30, label: "数据3"},
    {key: "4", data: 5, label: "数据2"},
    {key: "5", data: 30, label: "数据5"},
    {key: "6", data: 5, label: "数据2"},
    {key: "7", data: 30, label: "数据3"}
];

// 准备折线图数据
const xAxisData = chartData.map(item => item.key);
const seriesData = chartData.map(item => item.data);
const labels = chartData.map(item => item.label);

// 折线图配置
export const lineChartOption: echarts.EChartsOption = {
    title: {
        text: '数据趋势(折线图)',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        formatter: (params: any) => {
            const dataIndex = params[0].dataIndex;
            return `${labels[dataIndex]}: ${params[0].data}`;
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
            interval: 0
        },
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        },
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [
        {
            name: '数据值',
            type: 'line',
            data: seriesData,
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
                color: '#36a3f7',
                borderColor: '#fff',
                borderWidth: 2
            },
            lineStyle: {
                width: 3,
                color: '#36a3f7'
            },
            label: {
                show: true,
                position: 'top',
                formatter: (params: any) => {
                    return labels[params.dataIndex];
                }
            },
            emphasis: {
                itemStyle: {
                    color: '#ff6a00'
                }
            }
        }
    ]
};
